<!--
 * @Author: early-autumn
 * @Date: 2020-05-09 16:38:53
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-28 10:08:40
 -->
<template>
  <div>
    <el-table v-loading="loading" :data="visitList" stripe>
      <el-table-column
        label="诊所名称"
        align="center"
        prop="clinicName"
      ></el-table-column>
      <el-table-column
        label="回访人员"
        align="center"
        prop="visitPerson"
      ></el-table-column>
      <el-table-column label="跟踪状态" align="center" prop="trackStatus">
        <template slot-scope="scope">
          {{ trackingStatusEnum[scope.row.trackStatus] }}
        </template>
      </el-table-column>
      <el-table-column
        label="回访内容"
        align="center"
        prop="contet"
        min-width="160"
      ></el-table-column>
      <el-table-column
        label="回访结果"
        align="center"
        prop="result"
        min-width="160"
      ></el-table-column>
      <el-table-column label="回访状态" align="center" prop="visitStatus">
        <template slot-scope="scope">
          {{ returnVisitStatusEnum[scope.row.visitStatus] }}
        </template>
      </el-table-column>
      <el-table-column
        label="回访时间"
        align="center"
        prop="visitTime"
        min-width="160"
      >
        <template slot-scope="scope">
          {{ dayjs(scope.row.visitTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        min-width="160"
      >
        <template slot-scope="scope">
          {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column
        label="完成时间"
        align="center"
        prop="visitTime"
        min-width="160"
      >
        <template slot-scope="scope">
          {{
            scope.row.visitFinishTime &&
            dayjs(scope.row.visitFinishTime).format('YYYY-MM-DD HH:mm:ss')
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="100">
        <el-dropdown slot-scope="scope">
          <span class="el-dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleReturnVisitEditor">
              新建回访
            </el-dropdown-item>
            <el-dropdown-item
              v-if="returnVisitStatusEnum[scope.row.visitStatus] === '待计划'"
              @click.native="handleReturnVisitEditor(scope.row)"
            >
              编辑回访
            </el-dropdown-item>
            <el-dropdown-item
              v-if="returnVisitStatusEnum[scope.row.visitStatus] === '待计划'"
              @click.native="handleComplete(scope.row)"
            >
              完成回访
            </el-dropdown-item>
            <el-dropdown-item @click.native="handleDelete(scope.row)">
              删除
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-table-column>
      <empty slot="empty"></empty>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getListTc"
    ></pagination>
    <return-visit-editor
      v-model="returnVisitEditor.visible"
      :patient="patient"
      :data="returnVisitEditor.data"
      @ok="getListTc"
    ></return-visit-editor>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { listTc, updateTc, delTc } from '@/api/services/tc'
import { returnVisitStatusEnum, trackingStatusEnum } from '@/utils/enums'

import Empty from '@/components/yiya/Empty'
import ReturnVisitEditor from '@/views/tc/visit/ReturnVisitEditor'

export default {
  name: 'TCVisitRecordPane',
  components: {
    Empty,
    ReturnVisitEditor,
  },
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: true,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      visitList: [],
      returnVisitEditor: {
        visible: false,
        data: {},
      },
    }
  },
  computed: {
    dayjs() {
      return dayjs
    },
    trackingStatusEnum() {
      return trackingStatusEnum
    },
    returnVisitStatusEnum() {
      return returnVisitStatusEnum
    },
  },
  mounted() {
    this.getListTc()
  },
  methods: {
    async getListTc() {
      try {
        this.loading = true
        const { rows, total } = await listTc({
          ...this.queryParams,
          clinicPersonId: this.patient.id,
        })
        this.visitList = rows
        this.total = total
      } finally {
        this.loading = false
      }
    },
    handleReturnVisitEditor(visit) {
      this.returnVisitEditor = {
        visible: true,
        data: visit || {},
      }
    },
    async handleComplete(visit) {
      const { value: result } = await this.$prompt('回访结果', '完成回访', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入回访结果',
        inputValidator: (e) => !!(e && e.trim()),
        inputErrorMessage: '回访结果不能为空',
      })
      await updateTc({
        id: visit.id,
        result,
        visitStatus: returnVisitStatusEnum['已完成'],
        visitFinishTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      })
      this.msgSuccess('回访完成')
      await this.getListTc()
    },
    async handleDelete(visit) {
      await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      await delTc(visit.id)
      this.msgSuccess('删除成功')
      await this.getListTc()
    },
  },
}
</script>
